<template>
    <div class="p-6 space-y-6">
        <!-- 页面标题 -->
        <div class="flex items-center justify-between">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">已安装插件</h2>
            <div class="flex items-center gap-4">
                <button @click="checkUpdates"
                        class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                    检查更新
                </button>
                <select class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        v-model="statusFilter">
                    <option value="">全部状态</option>
                    <option value="active">已启用</option>
                    <option value="inactive">已禁用</option>
                    <option value="error">错误</option>
                </select>
            </div>
        </div>

        <!-- 统计信息 -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div class="card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">已安装</p>
                        <p class="text-2xl font-bold text-blue-600 dark:text-blue-400">{{ installedPlugins.length }}</p>
                    </div>
                    <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor"
                             viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">已启用</p>
                        <p class="text-2xl font-bold text-green-600 dark:text-green-400">{{ activeCount }}</p>
                    </div>
                    <div class="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor"
                             viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">待更新</p>
                        <p class="text-2xl font-bold text-orange-600 dark:text-orange-400">{{ updateCount }}</p>
                    </div>
                    <div class="w-10 h-10 bg-orange-100 dark:bg-orange-900 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor"
                             viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">错误</p>
                        <p class="text-2xl font-bold text-red-600 dark:text-red-400">{{ errorCount }}</p>
                    </div>
                    <div class="w-10 h-10 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-red-600 dark:text-red-400" fill="none" stroke="currentColor"
                             viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                </div>
            </div>
        </div>

        <!-- 插件列表 -->
        <div class="space-y-4">
            <div v-for="plugin in filteredPlugins" :key="plugin.id"
                 class="card hover:shadow-lg transition-all duration-300">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-4">
                        <div
                             class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="font-semibold text-gray-800 dark:text-gray-200">{{ plugin.name }}</h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400">{{ plugin.version }} • {{ plugin.author
                                }}</p>
                            <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">{{ plugin.description }}</p>
                        </div>
                    </div>

                    <div class="flex items-center gap-3">
                        <!-- 状态指示器 -->
                        <div class="flex items-center gap-2">
                            <div :class="[
                                'w-2 h-2 rounded-full',
                                plugin.status === 'active' ? 'bg-green-500' :
                                    plugin.status === 'inactive' ? 'bg-gray-400' : 'bg-red-500'
                            ]"></div>
                            <span :class="[
                                'text-sm',
                                plugin.status === 'active' ? 'text-green-600 dark:text-green-400' :
                                    plugin.status === 'inactive' ? 'text-gray-600 dark:text-gray-400' : 'text-red-600 dark:text-red-400'
                            ]">
                                {{ getStatusText(plugin.status) }}
                            </span>
                        </div>

                        <!-- 更新提示 -->
                        <div v-if="plugin.hasUpdate"
                             class="flex items-center gap-1 px-2 py-1 bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200 text-xs rounded-full">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                            可更新
                        </div>

                        <!-- 操作按钮 -->
                        <div class="flex items-center gap-2">
                            <button @click="togglePlugin(plugin.id)" :class="[
                                'px-3 py-1 text-sm rounded transition-colors',
                                plugin.status === 'active'
                                    ? 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 hover:bg-red-200 dark:hover:bg-red-800'
                                    : 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-800'
                            ]">
                                {{ plugin.status === 'active' ? '禁用' : '启用' }}
                            </button>

                            <button v-if="plugin.hasUpdate" @click="updatePlugin(plugin.id)"
                                    class="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
                                更新
                            </button>

                            <button @click="viewDetail(plugin.id)"
                                    class="px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                详情
                            </button>

                            <button @click="uninstallPlugin(plugin.id)"
                                    class="px-3 py-1 text-sm bg-red-600 text-white rounded hover:bg-red-700 transition-colors">
                                卸载
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 插件配置 -->
                <div v-if="plugin.status === 'active'" class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-400">配置选项</span>
                        <button @click="configurePlugin(plugin.id)"
                                class="px-3 py-1 text-sm bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
                            配置
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 空状态 -->
        <div v-if="filteredPlugins.length === 0" class="text-center py-12">
            <svg class="w-16 h-16 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
            </svg>
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">暂无已安装插件</h3>
            <p class="text-gray-500 dark:text-gray-400 mb-4">您还没有安装任何插件，前往插件市场看看吧</p>
            <button @click="$router.push('/plugin/market')"
                    class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                前往插件市场
            </button>
        </div>
    </div>
</template>

<script setup lang="ts" name="plugin-installed">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

defineOptions({ name: 'plugin-installed' })

const router = useRouter()
const statusFilter = ref('')

// 模拟已安装插件数据
const installedPlugins = ref([
    {
        id: 1,
        name: 'ECharts 图表插件',
        version: '1.2.3',
        author: 'Apache ECharts',
        description: '基于 ECharts 的图表组件，支持多种图表类型和交互功能',
        status: 'active',
        hasUpdate: true,
        updateVersion: '1.3.0'
    },
    {
        id: 2,
        name: '高级表格组件',
        version: '2.1.0',
        author: 'VeloAdmin Team',
        description: '功能强大的表格组件，支持排序、筛选、分页、导出等功能',
        status: 'active',
        hasUpdate: false
    },
    {
        id: 3,
        name: '文件上传组件',
        version: '1.0.5',
        author: 'FileUpload Team',
        description: '支持拖拽上传、多文件上传、进度显示的文件上传组件',
        status: 'inactive',
        hasUpdate: true,
        updateVersion: '1.1.0'
    },
    {
        id: 4,
        name: 'OAuth 认证插件',
        version: '1.5.2',
        author: 'Auth Team',
        description: '支持多种 OAuth 认证方式，包括微信、QQ、GitHub 等',
        status: 'error',
        hasUpdate: false,
        errorMessage: '配置错误：缺少必要的 API 密钥'
    }
])

// 计算属性
const filteredPlugins = computed(() => {
    if (!statusFilter.value) return installedPlugins.value
    return installedPlugins.value.filter(plugin => plugin.status === statusFilter.value)
})

const activeCount = computed(() => installedPlugins.value.filter(p => p.status === 'active').length)
const updateCount = computed(() => installedPlugins.value.filter(p => p.hasUpdate).length)
const errorCount = computed(() => installedPlugins.value.filter(p => p.status === 'error').length)

// 方法
function getStatusText(status: string) {
    const statusMap = {
        active: '已启用',
        inactive: '已禁用',
        error: '错误'
    }
    return statusMap[status as keyof typeof statusMap] || status
}

function togglePlugin(id: number) {
    const plugin = installedPlugins.value.find(p => p.id === id)
    if (plugin) {
        plugin.status = plugin.status === 'active' ? 'inactive' : 'active'
    }
}

function updatePlugin(id: number) {
    const plugin = installedPlugins.value.find(p => p.id === id)
    if (plugin && plugin.hasUpdate) {
        // 这里可以调用 API 进行更新操作
        plugin.version = plugin.updateVersion || plugin.version
        plugin.hasUpdate = false
    }
}

function uninstallPlugin(id: number) {
    if (confirm('确定要卸载这个插件吗？')) {
        installedPlugins.value = installedPlugins.value.filter(p => p.id !== id)
    }
}

function viewDetail(id: number) {
    router.push(`/plugin/detail/${id}`)
}

function configurePlugin(id: number) {
    // 这里可以打开配置弹窗或跳转到配置页面
    console.log('配置插件:', id)
}

function checkUpdates() {
    // 这里可以调用 API 检查所有插件的更新
    console.log('检查更新...')
}
</script>